<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { ref, reactive } from 'vue';
import Motion from '../utils/motion';
import { message } from '@/utils/message';
import { updateRules } from '../utils/rule';
import type { FormInstance } from 'element-plus';
import { useVerifyCode } from '../utils/verifyCode';
// import { $t, transformI18n } from '@/plugins/i18n';
import { useUserStoreHook } from '@/store/modules/user';
import { useRenderIcon } from '@/components/ReIcon/src/hooks';
import Lock from '~icons/ri/lock-fill';
import Iphone from '~icons/ep/iphone';
import User from '~icons/ri/user-3-fill';
import Keyhole from '~icons/ri/shield-keyhole-line';

const { t } = useI18n();
const checked = ref(false);
const loading = ref(false);
const ruleForm = reactive({
  username: '',
  phone: '',
  verifyCode: '',
  password: '',
  repeatPassword: ''
});
const ruleFormRef = ref<FormInstance>();
const { isDisabled, text } = useVerifyCode();
const repeatPasswordRule = [
  {
    validator: (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入确认密码'));
      } else if (ruleForm.password !== value) {
        callback(new Error('两次输入的密码不一致'));
      } else {
        callback();
      }
    },
    trigger: 'blur'
  }
];

const onUpdate = async (formEl: FormInstance | undefined) => {
  loading.value = true;
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      if (checked.value) {
        // 模拟请求，需根据实际开发进行修改
        setTimeout(() => {
          message('注册成功', {
            type: 'success'
          });
          loading.value = false;
        }, 2000);
      } else {
        loading.value = false;
        message('请勾选隐私政策', {
          type: 'warning'
        });
      }
    } else {
      loading.value = false;
    }
  });
};

function onBack() {
  useVerifyCode().end();
  useUserStoreHook().setCurrentPage(0);
}
</script>

<template>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="updateRules" size="large">
    <Motion>
      <el-form-item
        :rules="[
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          }
        ]"
        prop="username"
      >
        <el-input v-model="ruleForm.username" clearable placeholder="账号" :prefix-icon="useRenderIcon(User)" />
      </el-form-item>
    </Motion>

    <Motion :delay="100">
      <el-form-item prop="phone">
        <el-input v-model="ruleForm.phone" clearable placeholder="手机号码" :prefix-icon="useRenderIcon(Iphone)" />
      </el-form-item>
    </Motion>

    <Motion :delay="150">
      <el-form-item prop="verifyCode">
        <div class="w-full flex justify-between">
          <el-input v-model="ruleForm.verifyCode" clearable placeholder="短信验证码" :prefix-icon="useRenderIcon(Keyhole)" />
          <el-button :disabled="isDisabled" class="ml-2!" @click="useVerifyCode().start(ruleFormRef, 'phone')">
            {{ text.length > 0 ? text + t('login.pureInfo') : t('login.pureGetVerifyCode') }}
          </el-button>
        </div>
      </el-form-item>
    </Motion>

    <Motion :delay="200">
      <el-form-item prop="password">
        <el-input v-model="ruleForm.password" clearable show-password placeholder="密码" :prefix-icon="useRenderIcon(Lock)" />
      </el-form-item>
    </Motion>

    <Motion :delay="250">
      <el-form-item :rules="repeatPasswordRule" prop="repeatPassword">
        <el-input v-model="ruleForm.repeatPassword" clearable show-password placeholder="确认密码" :prefix-icon="useRenderIcon(Lock)" />
      </el-form-item>
    </Motion>

    <Motion :delay="300">
      <el-form-item>
        <el-checkbox v-model="checked">
          {{ '我已仔细阅读并接收' }}
        </el-checkbox>
        <el-button link type="primary">
          {{ '《隐私政策》' }}
        </el-button>
      </el-form-item>
    </Motion>

    <Motion :delay="350">
      <el-form-item>
        <el-button class="w-full" size="default" type="primary" :loading="loading" @click="onUpdate(ruleFormRef)">
          {{ '确定' }}
        </el-button>
      </el-form-item>
    </Motion>

    <Motion :delay="400">
      <el-form-item>
        <el-button class="w-full" size="default" @click="onBack">
          {{ '返回' }}
        </el-button>
      </el-form-item>
    </Motion>
  </el-form>
</template>
